<template>
  <div class="message">
    <div class="nickname">
      {{ nickname }}
    </div>
    <div class="content">
      {{ props.message.message }}
    </div>
    <div class="time">
      {{ timeStr }}
    </div>
  </div>
</template>

<script lang="ts" setup>import type {GroupMessageInterface} from "@/type/IMModels";
import type {UserInterface} from "@/type/models";
import {computed} from "vue";

const props = defineProps<{ message: GroupMessageInterface }>();
const teamMember = JSON.parse(localStorage.getItem("teamMember") as string)
const nickname = teamMember.find((item: UserInterface) => item.uid == props.message.fromUid)?.nickname
const timeStr = computed(() => {
  let date = props.message.time;
  if (typeof date === 'string') {
    date = new Date(date);
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
})
</script>
<style scoped>
.nickname {
  color: black;
  font-family: 微软雅黑, serif;
  font-size: 18px;
}

.content {
  border-radius: 5px;
  background-color: white;
  font-family: "HarmonyOS Sans SC", serif;
  font-size: 25px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: inline-block;
  min-width: 20px;
  max-width: 500px;
}

.time {
  font-family: "HarmonyOS Sans SC", serif;
  font-size: 13px;
}

.message {
  margin-bottom: 20px;
}
</style>